<template>
  <div>
    <div class="kylin-form configure-confirm-table">
      <ky-table
        :search_data="search_data"
        :getData="getConfigures"
        :search_criteria="search_criteria"
        :appendToBody="true"
        :showSelect="true"
        :modalAppendToBody="false"
        :modalTable="true"
        ref="table"
      >
        <template v-slot:table-action>
          <el-button
            class="kylin-item-button"
            @click="handleAdd"
            :disabled="$refs.table && $refs.table.selectRow.ids.length == 0"
          >
            {{ $t("add") }}
          </el-button>
        </template>
        <template v-slot:table>
          <el-table-column prop="name" :label="$t('configure.configure_item')">
          </el-table-column>
          <el-table-column
            prop="configType"
            :label="$t('configure.configure_type')"
          >
          </el-table-column>
          <el-table-column prop="attribute" :label="$t('attribute')">
          </el-table-column>
          <el-table-column
            prop="baseline"
            :label="$t('configure.configure_value')"
          >
          </el-table-column>
          <el-table-column prop="flag" :label="$t('configure.restart_sign')">
          </el-table-column>
          <el-table-column prop="filePath" :label="$t('configure.file_path')">
          </el-table-column>
        </template>
      </ky-table>
    </div>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("configure.confirm_issue")
      }}</el-button>
    </div> -->
  </div>
</template>

<script>
import kyTable from "@/components/KyTable";
import { getConfigures, addConfigure } from "@/api/configure_group";
import { getClassInfo } from "@/api/config";
export default {
  props: {
    groupId: {
      type: Number | String | undefined,
    },
    form: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  components: {
    kyTable,
  },
  data() {
    return {
      loading: false,
      search_criteria: {
        groupId: this.groupId,
      },
      search_data: {
        name: {
          type: "text",
          name: "name",
        },
        configType: {
          name: "configure.configure_type",
          type: "select",
          items: [],
          func: this.getConfigureInfo,
        },
        attribute: {
          name: "attribute",
          type: "select",
          items: [],
        },
        baseline: {
          name: "configure.configure_value",
          type: "text",
        },
        flag: {
          name: "configure.restart_sign",
          type: "select",
          items: [
            { key: true, name: this.$t("true") },
            { key: false, name: this.$t("false") },
          ],
        },
        filePath: {
          name: "configure.file_path",
          type: "select",
          items: [],
        },
      },
    };
  },
  methods: {
    getConfigures,
    async getAllIds() {
      let data = [];
      const res = await this.getConfigures({
        search: this.$refs.table.objSearch.search,
        ...this.search_criteria,
        paged: false,
      });
      res.data.data.results.map((item) => {
        data.push(item.id);
      });
      return data;
    },
    getConfigureInfo() {
      getClassInfo().then((res) => {
        let data = res.data.data;
        let configTypes = Object.keys(data);
        let files = [];
        let attrs = [];
        configTypes.forEach((key) => {
          this.search_data["configType"].items.push({ key, name: key });
          data[key].forEach((item) => {
            for (let k in item) {
              const attrIndex = attrs.indexOf(k);
              if (attrIndex < 0) {
                attrs.push(k);
                this.search_data["attribute"].items.push({ key: k, name: k });
              }
              const index = files.indexOf(item[k]);
              if (index < 0) {
                files.push(item[k]);
                this.search_data["filePath"].items.push({
                  key: item[k],
                  name: item[k],
                });
              }
            }
          });
        });
      });
    },
    async handleAdd() {
      let ids = [];
      if (this.$refs.table.select_id == "2") {
        ids = await this.getAllIds();
      } else {
        ids = this.$refs.table.selectRow.ids;
      }
      addConfigure({
        groupId: this.groupId,
        configIds: ids,
      }).then((res) => {
        if (res.data.code === "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$emit("click", "success");
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.configure-confirm-table {
  max-height: 600px;
  overflow: auto;
}
</style>